import React from 'react';
import {Breadcrumb} from 'antd'
import {Link} from 'react-router-dom'
import {useSelector} from 'react-redux'
import {InitialState} from '../../store/reducer'
import {getText} from '../../utils/constant'

const HgBreadCrumb = () => {
    //从redux中获取keyPath
    var keyPath = useSelector((state:InitialState)=>state.keyPath)
    
    keyPath.reverse();

    //动态生成items ( 根据keyPath生成 ) 
    var items:any = keyPath.map(item=>{
        return { title: getText(item) };
    })

    items.unshift({ title: <Link to="/index/home">首页</Link>});

    // var items = [
    //     {
    //         title: <Link to="/index/home">首页</Link>,
    //     },
    //     {
    //         title: <Link to="/index/home">账号管理</Link>,
    //     },
    //     {
    //         title: '管理员列表',
    //     }
    // ]

    return (
        <Breadcrumb items={items} style={{paddingBottom:20}} />
    );
};

export default HgBreadCrumb;